<template>
    <div>
        <!-- <router-link to="/home">home</router-link>
        <router-link to="/about">about</router-link>
        <router-link to="/message">meaage</router-link> -->
        <button @click="goAbout">跳转到about</button>
        <router-view></router-view>
    </div>
</template>
<script setup>
import  {useRouter}  from 'vue-router';
let router=new useRouter()
const goAbout =()=>{
    // push用于跳转,三种写法
    //跳转还可以用replace，replace会替换历史记录，令用户无法返回之前的页面
    // router.push('./about')
    // router.push({path:'./about'})
    // // router.push({name:'About'})
    // router.push({
    //     // 查询参，通常跟配合path
    //     path:'/about',
    //     query:{
    //         a:1
    //     }
    //     })
    // router.push({
    // // 普通参，通常跟配合name
    // name:'about',
    // params:{
    //     a:1
    // }
    // })
    // 动态路由
    // 1. 在index.js中，找到对应的路由挖坑（加入占位符）
    // 2. 在跳转的过程中需要去填坑
    // 3. 接受组件中获取传递的参数
    let id=1;
    router.push(`/about/${id}`)
    
}

</script>
<style lang="scss">

</style>
